<template>
  <div>
    <my-lazy v-if="isShow"></my-lazy>
    <div class="classify" v-else="!isShow">
      <div class="classify-title">
        <div class="classify-styles">
          <ul>
            <!-- <li><router-link to="/classify">全部</router-link></li> -->
            <li v-for="(item, i) in styles" @click="styling(i)">
              <router-link to="/classify" :class="index == i ? 'active' : ''">{{
                item.name
              }}</router-link>
            </li>
          </ul>
        </div>
        <div class="classify-detail" ref="detail">
          <div class="classify-areas">
            <ul>
              <!-- <li><router-link to="/classify">全部</router-link></li> -->
              <li v-for="(item, i) in areas" @click="areaing(i)">
                <router-link
                  to="/classify"
                  :class="index1 == i ? 'active' : ''"
                  >{{ item.name }}</router-link
                >
              </li>
            </ul>
          </div>
          <div class="classify-status">
            <ul>
              <!-- <li><router-link to="/">全部</router-link></li> -->
              <li v-for="(item, i) in status" @click="finishing(i)">
                <router-link
                  to="/classify"
                  :class="index4 == i ? 'active' : ''"
                  >{{ item.name }}</router-link
                >
              </li>
            </ul>
          </div>
          <div class="classify-prices">
            <ul>
              <li v-for="(item, i) in prices" @click="freeing(i)">
                <router-link
                  to="/classify"
                  :class="index3 == i ? 'active' : ''"
                  >{{ item.name }}</router-link
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="classify-orders">
          <ul>
            <li v-for="(item, i) in orders" @click="ordering(i)">
              <router-link
                to="/classify"
                :class="index2 == i ? 'active' : ''"
                >{{ item.name }}</router-link
              >
            </li>
          </ul>
          <div class="classify-filter" @click="changeHeight()">
            <span class="iconfont icon-arrow-down"></span>
            <span>筛选</span>
          </div>
        </div>
      </div>
      <div class="classify-list">
        <ul>
          <li v-for="(item, i) in total">
            <router-link to="/detail"
              ><img :src="item.img" @click="getCom(i)" alt="" srcset=""
            /></router-link>

            <div class="list-title">
              <h4>{{ item.title }}</h4>
              <p>
                {{ item.isfinish == 1 ? "[完结] 共" : "[更新] 至" }}
                {{ item.total }} 话
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- <router-view></router-view> -->
    </div>
  </div>
</template>
<style lang="scss">
@import "../static/style/variable.scss";
.classify {
  position: relative;
  width: 95%;
  margin: 3rem auto 0;
  .classify-title {
    .classify-styles {
      width: 100%;
      border-bottom: 1px solid #ccc;
      margin-top: 0.5333rem;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          margin: 0.4rem 0.5rem;
          a {
            font-size: 12px;
            color: #6c727e;
            &.active {
              color: hotpink;
            }
          }
        }
      }
    }

    .classify-detail {
      width: 100%;
      height: 0rem;
      transition: all 0.5s;
      overflow: hidden;
      .classify-areas {
        width: 100%;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin: 0.3rem 0.5rem;
            a {
              font-size: 12px;
              color: #6c727e;
              &.active {
                color: hotpink;
              }
            }
          }
        }
      }
      .classify-prices {
        width: 100%;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin: 0.3rem 0.5rem;
            a {
              font-size: 12px;
              color: #6c727e;
              &.active {
                color: hotpink;
              }
            }
          }
        }
      }
      .classify-status {
        width: 100%;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin: 0.3rem 0.5rem;
            a {
              font-size: 12px;
              color: #6c727e;
              &.active {
                color: hotpink;
              }
            }
          }
        }
      }
    }
    .classify-orders {
      width: 100%;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          margin: 0.3rem 0.5rem 0.5rem 0.5rem;
          a {
            font-size: 12px;
            color: #6c727e;
            &.active {
              color: hotpink;
            }
            // cursor: pointer;
          }
        }
      }
      .classify-filter {
        span {
          font-size: 13px;
          color: #6c727e;
          padding-right: 0.5667rem;
        }
      }
    }
  }
  .classify-list {
    width: 100%;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        // width: 6.3333rem;
        flex: 25%;
        height: 9rem;
        margin: 0.2667rem 0.4rem 3.5rem 0.4rem;
        a {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list-title {
          width: 100%;
          display: flex;
          flex-direction: column;
          h4 {
            width: 100%;
            height: 1.3333rem;
            // box-sizing: border-box;
            overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            // -o-text-overflow: ellipsis;
            font-weight: 500;
            font-size: 14px;
            padding-top: 0.1667rem;
          }
          p {
            width: 100%;
            color: $color;
            font-size: 12px;
            padding-top: 0.1667rem;
          }
        }
      }
    }
  }
}
</style>
<script>
import { allLabel, classPage } from "@/request";
import lazyCom from "../components/lazyCom.vue";
export default {
  name: "classify",
  data() {
    return {
      index: 0,
      index1: 0,
      index2: 0,
      index3: 0,
      index4: 0,
      isShow: true,
      areas: [],
      orders: [],
      prices: [],
      styles: [],
      status: [],
      total: [],
      info: {
        style_id: -1,
        area_id: -1,
        is_finish: -1,
        order: 0,
        is_free: -1,
        page_num: 1,
        page_size: 15,
        isOpen: true,
      },
      comId: 0,
    };
  },
  components: {
    "my-lazy": lazyCom,
  },
  methods: {
    getCom(i) {
      this.comId = this.total[i].id;
      localStorage.setItem("comid", this.comId);
    },

    changeHeight() {
      if (this.isOpen) {
        this.$nextTick(() => {
          if (this.$refs["detail"]) {
            let height = this.$refs["detail"];
            height.style["height"] = "5.7rem";
          }
        });
        this.isOpen = false;
      } else {
        this.$nextTick(() => {
          if (this.$refs["detail"]) {
            let height = this.$refs["detail"];
            height.style["height"] = "0rem";
          }
        });
        this.isOpen = true;
      }
    },
    styling(i) {
      this.index = i;
      this.info.style_id = this.styles[i].id;
      this.isShow = true;
      classPage(this.info).then((content) => {
        let { data } = content;
        let totalList = data.map((item, i) => {
          let obj = {};
          obj.id = item.season_id;
          obj.isfinish = item.is_finish;
          obj.title = item.title;
          obj.total = item.total;
          obj.img = item.vertical_cover;
          return obj;
        });
        // console.log(this.info);
        this.total = totalList;
        this.isShow = false;
      });
    },
    areaing(a) {
      this.index1 = a;
      this.info.area_id = this.areas[a].id;
      classPage(this.info).then((content) => {
        let { data } = content;
        let totalList = data.map((item, i) => {
          let obj = {};
          obj.id = item.season_id;
          obj.isfinish = item.is_finish;
          obj.title = item.title;
          obj.total = item.total;
          obj.img = item.vertical_cover;
          return obj;
        });
        // console.log(this.info);
        this.total = totalList;
        this.isShow = false;
      });
    },
    ordering(b) {
      this.index2 = b;
      console.log(111);
      this.info.order = this.orders[b].id;
      console.log(this.index2);
      classPage(this.info).then((content) => {
        let { data } = content;
        let totalList = data.map((item, i) => {
          let obj = {};
          obj.id = item.season_id;
          obj.isfinish = item.is_finish;
          obj.title = item.title;
          obj.total = item.total;
          obj.img = item.vertical_cover;
          return obj;
        });
        // console.log(this.info);
        this.total = totalList;
        this.isShow = false;
      });
    },
    freeing(c) {
      this.index3 = c;
      this.info.is_free = this.prices[c].id;
      console.log(this.index3);
      classPage(this.info).then((content) => {
        let { data } = content;
        let totalList = data.map((item, i) => {
          let obj = {};
          obj.id = item.season_id;
          obj.isfinish = item.is_finish;
          obj.title = item.title;
          obj.total = item.total;
          obj.img = item.vertical_cover;
          return obj;
        });
        // console.log(this.info);
        this.total = totalList;
        this.isShow = false;
      });
    },
    finishing(d) {
      this.index4 = d;
      console.log(this.index4);
      this.info.is_finish = this.status[d].id;
      classPage(this.info).then((content) => {
        let { data } = content;
        let totalList = data.map((item, i) => {
          let obj = {};
          obj.id = item.season_id;
          obj.isfinish = item.is_finish;
          obj.title = item.title;
          obj.total = item.total;
          obj.img = item.vertical_cover;
          return obj;
        });
        // console.log(this.info);
        this.total = totalList;
        this.isShow = false;
      });
    },
  },
  created() {
    this.isShow = true;
    allLabel().then((content) => {
      // console.log(content);
      let { areas, orders, prices, styles, status } = content.data;
      let areasList = areas.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.name = item.name;
        return obj;
      });
      this.areas = areasList;
      this.areas = [{ name: "全部", id: -1 }].concat(this.areas);
      // console.log(this.areas);
      let ordersList = orders.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.name = item.name;
        return obj;
      });
      this.orders = ordersList;
      this.orders = [{ name: "全部", id: -1 }].concat(this.orders);

      let pricesList = prices.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.name = item.name;
        return obj;
      });
      this.prices = pricesList;
      this.prices = [{ name: "全部", id: -1 }].concat(this.prices);

      let stylesList = styles.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.name = item.name;
        return obj;
      });
      this.styles = stylesList;
      this.styles = [{ name: "全部", id: -1 }].concat(this.styles);

      let statusList = status.map((item) => {
        let obj = {};
        obj.id = item.id;
        obj.name = item.name;
        return obj;
      });
      this.status = statusList;
      this.status = [{ name: "全部", id: -1 }].concat(this.status);
    });
    classPage(this.info).then((content) => {
      // console.log(content);
      let { data } = content;
      // console.log(data);
      let totalList = data.map((item, i) => {
        let obj = {};
        obj.id = item.season_id;
        obj.isfinish = item.is_finish;
        obj.title = item.title;
        obj.total = item.total;
        obj.img = item.vertical_cover;
        // obj.list1 = data.series_info;
        return obj;
      });
      // console.log(this.info);
      this.total = totalList;
      // console.log(this.total.list1);
      this.isShow = false;
    });
  },
};
</script>